<template>
	<!--	<el-select @clear="clearFn" :disabled="disabled" v-model="shopId" @change="changeShopFN" :placeholder="$t('Prod.selectShopIdTip')" clearable>-->
	<!--	</el-select>-->
	<div class="select-box">

		<div @click.stop="showFn" class="show-text">
			<span v-if="currentShop && currentShop.name" style="color: #606266;justify-content: space-between;display: flex; align-items: center;">
				 <span class="showText">
					{{ currentShop.name }}
				 </span>
			</span>
			<span v-else >
				{{ $t('Prod.selectShopIdTip') }}
			</span>
		</div>
    <el-icon style="margin-left:10px " v-if="currentShop && currentShop.name" @click.stop="clearFn"><CircleClose /></el-icon>
	</div>
	<el-dialog :title="$t('Prod.selectShopIdTip')" v-model="show" draggable :close-on-click-modal="false">
		<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keydown.enter.prevent="getDataList">
			<el-form-item :label="$t('common.search')" prop="search" style="margin-bottom: 10px">
				<el-input
					prefix-icon="el-icon-search"
					:placeholder="$joinFormat('/', $t('Shop.name'), $t('Shop.address'), $t('Shop.contactPhone'))"
					clearable
					v-model="state.queryForm.search"
					style="width: 350px"
				/>
			</el-form-item>
			<el-form-item style="margin-bottom: 12px !important">
				<el-button icon="search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
				<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
			</el-form-item>
		</el-form>
		<el-table
			highlight-current-row
			:data="state.dataList"
			v-loading="state.loading"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle.headerCellStyle"
			@sort-change="sortChangeHandle"
			@current-change="selectShop"
		>
			<el-table-column prop="id" header-align="center" :label="$t('Shop.id')" min-width="200" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.id }}
					<SvgIcon name="ele-CopyDocument" class="icon_copy" @click="copyText(scope.row.id)" />
				</template>
			</el-table-column>
			<el-table-column prop="nickname" header-align="center" min-width="150" show-overflow-tooltip :label="$t('Shop.shopInfo')">
				<template #default="scope">
					<card-info-col :icon="scope.row.avatar" :name="scope.row.name" />
				</template>
			</el-table-column>
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</el-dialog>
</template>
<script lang="ts" setup>
import { getPage } from '/@/api/bizs/Shop';
import { BasicTableProps, useTable } from '/@/hooks/table';
import CardInfoCol from '/@/components/biz/card-info-col.vue';
import { getObj as getShopObj,  } from '/@/api/bizs/Shop'
import commonFunction from "/@/utils/commonFunction";
const { copyText } = commonFunction();

const show = ref<boolean>(false);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getPage,
});
const emit = defineEmits(['update:modelValue', 'change', 'clear']);
//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);
const queryRef = ref();
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	getDataList();
};
const currentShop = ref<{name?:string}>({});
const selectShop = (e: any) => {
	if (e) {
	currentShop.value = e;
	show.value = false;
		emit('update:modelValue', e.id);
	}
};



const showFn = ()=>{
	show.value = true;
	resetQuery();

}

interface Props {
	disabled?: boolean;
	modelValue?: string;
}
 const props = withDefaults(defineProps<Props>(), {
	disabled: false,
	modelValue: '',
});

watch(()=> props.modelValue,async (n,o)=>{
  if(n){
    let res = await getShopObj(n)
    currentShop.value.name = res.data.name

  }else{
    currentShop.value.name = ""
  }

},{
  immediate:true
})


const clearFn = () => {
	currentShop.value = {};
  resetQuery()
	emit('update:modelValue', "");
	emit('clear');
};


</script>

<style lang="scss" scoped>
.select-box {
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 5px;
	color: #a8abb2;
	border: 1px solid #e5e7eb;
	min-width: 220px;
	width: 100%;
  display: flex;
	height: 30px;
	line-height: 30px;
  align-items: center;
  .show-text{
    flex: 1 0 0;
  }
}

.showText{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 0 0;
}
</style>
